{% include "header.html" %}
<style>
    #video > video {
        display: block;
        margin: 0 auto 12px;
        width: 240px;
        height: 240px;
        background: #000;
        border-radius: 5px;
    }
</style>
<div class="container">
    <div class="box box-danger">
        <div class="box-header">
            <div class="text-center">
                <span class="h-title">在线签到</span>
            </div>
        </div>
        <div class="box-body">
            <div id="video"></div>
            <div class="text-center form-group">
                <button id="qd" class="btn btn-danger">扫码签到</button>
                <button id="qj" class="btn btn-warning">我要请假</button>
            </div>
            <div style="display: none;" class="alert">
                <a href="javascript:" class="close"> &times; </a>
                <strong>提示！</strong><span></span>
            </div>
{#            <div id="ss"></div>#}
            {% include "sign.html" %}
        </div>
    </div>
</div>
<script>
    var $al = $('.alert');
    var ds = null;
    var scan = new QRScan('video');
    var success = 0; // 用于限制解析成功只有一次 避免因为延迟出现多次提示问题
{#    var ss = $('#ss');#}

    function openCamera() {
        success = 0;
        scan.openScan();
        $('#qd').html('关闭扫码');
        ds = window.setInterval(function () {
            startScan(); // 设置定时截图解码
        }, 200);
        $al.attr('class', 'alert').hide();
    }

    function closeCamera() {
        scan.closeScan();
        window.clearInterval(ds); // 清除定时
        ds = null;
        $('#qd').html('扫码签到');
    }

    function startScan() {
        scan.getQRDecode(function (data) {
            if (data.success && success < 1) {
                var qd_url = data.result;
                // 地址长度大概60，远高于这个值 判断为解码异常
                if (qd_url.length < 80) {
                    success++;
                    closeCamera(); // 解码成功关闭扫码相机
                    {% if data.local and not data.zs %}
                        localCheck({{ data.clazz.id }}, $('.box-body'), function (ds, dt) {
                            {# alert("判断一波：" + (can === true) + " " + qd_url);#}
                            $.post(qd_url, {dt: dt}, function (data) {
                                if (data.status) {
                                    $al.addClass('alert-info').fadeIn().find('span').html('签到成功');
                                } else {
                                    $al.addClass('alert-warning').fadeIn().find('span').html(data.msg);
                                }
                            });
                        });
                    {% else %}
                        $.post(qd_url, {dt: 0}, function (data) {
                            if (data.status) {
                                $al.addClass('alert-info').fadeIn().find('span').html('签到成功');
                            } else {
                                $al.addClass('alert-warning').fadeIn().find('span').html(data.msg);
                            }
                        });
                    {% endif %}

                }
            }
        });
    }

    $('#qd').click(function () {
        if ('{{ data.can }}' === 'True') {
            if (ds === null) {
                openCamera(); // 打开扫码相机
            } else {
                closeCamera();
            }
        } else {
            $al.addClass('alert-warning').fadeIn().find('span').html('无课程需要签到');
        }
    });

    $('#qj').click(function () {
        if ('{{ data.zs }}' === 'True') {
            $al.addClass('alert-warning').fadeIn().find('span').html('自习不允许请假');
            return;
        }
        if ('{{ data.can }}' === 'True') {
            $.post('{% if data.can == True %}/record/check_in/'+'{{ data.clazz.id }}'+'?type=qj{% endif %}',function (data) {
                if (data.status) {
                    $al.addClass('alert-info').fadeIn().find('span').html('请假成功');
                } else {
                    $al.addClass('alert-warning').fadeIn().find('span').html(data.msg);
                }
            });
        } else {
            $al.addClass('alert-warning').fadeIn().find('span').html('无课程需要请假');
        }
    });

    $('.alert .close').click(function () {
        $al.attr('class', 'alert').hide();
    });
</script>
</body>
</html>